<%--
  Created by IntelliJ IDEA.
  Author: Deng PengFei
  Date: 2021/8/14
  Time: 16:30
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>个人信息界面</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">

    <%--引入LayUI--%>
    <link href="layui/css/layui.css" rel="stylesheet">
    <script src="layui/layui.js"></script>
    <script src="js/jquery-3.1.0.js"></script>

    <style>

        body {
            background-color: #eeeeee;
        }

        .layui-row {
            padding: 10px;
            margin: 10px;
            background-color: white;
            border-radius: 5px;
        }

        .layui-colla-title {
            font-size: 16px;
            color: #009f95;
        }

        .layui-col-lg4 {
            padding: 10px;
        }

        #show-msg-pass, #show-msg-pass-again {
            font-size: 12px;
            width: 250px;
        }

    </style>
</head>
<body>
<div class="layui-layout layui-layout-admin">


    <%--面包屑导航--%>
    <%--<div class="layui-row">
            <span class="layui-breadcrumb">
             <a href="teacher/adviser/studentInfo.jsp">首页</a><a><cite>个人信息设置</cite></a>
            </span>
    </div>--%>

    <%--个人信息设置界面--%>
    <div class="layui-row">
        <div class="layui-collapse">

            <%--个人基本信息设置--%>
            <div class="layui-colla-item">
                <h2 class="layui-colla-title">
                    <i class="layui-icon layui-icon-username"></i> 个 人 基 本 信 息
                </h2>
                <div class="layui-colla-content layui-show layui-clear">
                    <div class="layui-container ">
                        <div class="layui-row">
                            <div class="layui-col-lg8 layui-col-lg-offset2">
                                <div class="layui-col-lg4">
                                    学号/工号： <span id="NO">- -</span>
                                </div>
                                <div class="layui-col-lg4">
                                    姓名： <span id="name">- -</span>
                                </div>
                                <div class="layui-col-lg4">
                                    性别： <span id="sex">- -</span>
                                </div>
                                <div class="layui-col-lg4">
                                    学院名称： <span id="college">- -</span>
                                </div>
                                <div class="layui-col-lg4">
                                    专业/部门： <span id="major">- -</span>
                                </div>
                                <div class="layui-col-lg4">
                                    班级/职称： <span id="grade">- -</span>
                                </div>
                                <div class="layui-col-lg4">
                                    联系电话： <span id="tel">- -</span>
                                </div>

                                <div class="layui-col-lg12">
                                    个人邮箱： <span id="email">- -</span>
                                    <button class="layui-btn layui-btn-primary layui-border-green layui-btn-radius"
                                            id="updateEmailBtn">
                                        <i class="layui-icon layui-icon-email"></i> 电子邮箱设置
                                    </button>
                                </div>

                                <%--<div class="layui-col-lg12" style="padding-top: 10px">
                                    电子签名：<img id="signature" src="" alt="我的电子签名">
                                    <button class="layui-btn layui-btn-primary layui-border-green layui-btn-radius"
                                            id="signature-btn">
                                        <i class="layui-icon layui-icon-upload"></i>上传电子签名
                                    </button>
                                </div>--%>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <%--修改密码设置--%>
            <div class="layui-colla-item">
                <h2 class="layui-colla-title">
                    <i class="layui-icon layui-icon-key"></i> 账 号 密 码 设 置
                </h2>
                <div class="layui-colla-content layui-clear">
                    <div class="layui-container">

                        <div class="layui-col-lg6 layui-col-lg-offset3">


                            <form class="layui-form" action="" onsubmit="return updatePass()">

                                <div class="layui-form-item">
                                    <label class="layui-form-label" for="oldPass">原 密 码：</label>
                                    <div class="layui-input-inline">
                                        <input type="password" id="oldPass" name="oldPass" required
                                               lay-verify="required"
                                               placeholder="请输入原密码" autocomplete="off" class="layui-input">
                                    </div>
                                </div>

                                <div class="layui-form-item">
                                    <label class="layui-form-label" for="password">新 密 码：</label>
                                    <div class="layui-input-inline">
                                        <input type="password" id="password" name="password" required
                                               lay-verify="required" onkeyup="checkPassRes()"
                                               placeholder="请输入密码" autocomplete="off" class="layui-input">
                                    </div>
                                    <div class="layui-form-mid layui-word-aux" id="show-msg-pass">
                                        6到16位字符,同时包含数字和大小写字母
                                    </div>
                                </div>

                                <div class="layui-form-item">
                                    <label class="layui-form-label" for="again">确认密码：</label>
                                    <div class="layui-input-inline">
                                        <input type="password" id="again" name="again" required
                                               lay-verify="required" onkeyup="checkPassAgain()"
                                               placeholder="请输入密码" autocomplete="off" class="layui-input">
                                    </div>
                                    <div class="layui-form-mid layui-word-aux" id="show-msg-pass-again">再次输入账号密码
                                    </div>
                                </div>


                                <div class="layui-form-item">
                                    <div class="layui-input-block">
                                        <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
                                        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                                    </div>
                                </div>

                            </form>
                        </div>
                    </div>
                </div>
            </div>

        </div>

    </div>


</div>
</body>


<%--上传个人电子签名--%>
<div class="layui-col-lg12" id="upload-img" style="display: none">

    <div class="layui-card">
        <div class="layui-card-header">上传电子签名，大小不超过1Mb</div>
        <div class="layui-card-body">
            <div class="layui-upload">
                <button type="button" class="layui-btn" id="test-upload-normal">
                    <i class="layui-icon layui-icon-picture"></i>电子签名图片
                </button>
                <br><br>
                <button type="button" class="layui-btn" id="upload-normal">
                    上传
                </button>
                <div class="layui-upload-list">
                    <img class="layui-upload-img" id="test-upload-normal-img"
                         height='100px' alt="电子签名预览" src="">
                    <p id="test-upload-demoText"></p>
                </div>
            </div>
        </div>
    </div>
</div>


<%--用户邮箱设置的盒子--%>
<div id="setEmail" style="display: none">
    <div class="layui-row">
        <div class="layui-card">
            <div class="layui-card-header">
                <h2><img src="img/email.png">邮箱设置</h2>
            </div>
            <div class="layui-card-body">

                <%--用户修改邮箱--%>
                <div class="layui-col-lg6">
                    <div class="layui-col-lg12" style="padding: 10px">
                        <blockquote class="layui-elem-quote">
                            <h3>
                                <i class="layui-icon layui-icon-email" style="color: #009688;font-size: 20px;"></i>
                                邮箱设置
                            </h3>
                        </blockquote>
                    </div>
                    <div class="layui-col-lg12" style="padding: 20px 0;">
                        <div class="layui-inline">
                            <label class="layui-form-label">
                                我的邮箱
                            </label>
                            <div class="layui-input-inline" style="width: 200px">
                                <label>
                                    <input type="text" name="email" id="setEmailBox" lay-verify="email"
                                           autocomplete="off" class="layui-input">
                                </label>
                            </div>
                            <button class="layui-btn" id="updateEmail">设置 / 修改</button>
                        </div>
                    </div>
                </div>


                <%--用户修改邮箱的授权码--%>
                <div class="layui-col-lg6">
                    <div class="layui-col-lg12" style="padding: 10px">
                        <blockquote class="layui-elem-quote">
                            <h3>
                                <i class="layui-icon layui-icon-auz" style="color: #009688; font-size: 20px;"></i>
                                邮箱授权码设置
                            </h3>
                        </blockquote>
                    </div>
                    <div class="layui-col-lg12" style="padding: 20px 0;">
                        <div class="layui-inline">
                            <label class="layui-form-label">
                                邮箱授权码
                            </label>
                            <div class="layui-input-inline" style="width: 200px">
                                <label>
                                    <input type="text" name="email" id="setEmailCode" lay-verify="email"
                                           autocomplete="off" class="layui-input">
                                </label>
                            </div>
                            <button class="layui-btn" id="updateEmailCode">设置 / 修改</button>
                        </div>
                    </div>
                </div>


                <%--获取邮箱授权码的操作提示--%>
                <div class="layui-col-lg12" style="padding: 10px">
                    <blockquote class="layui-elem-quote">
                        <h3>
                            <img src="img/QQEmail.png" alt="">
                            如何获取QQ邮箱授权码？
                        </h3>
                    </blockquote>
                </div>
                <div class="layui-col-lg12">
                    <fieldset class="layui-elem-field">
                        <legend style="color: #5FB878;font-size: 16px;">

                            <i class="layui-icon layui-icon-tips" style=" font-size: 16px;"></i>
                            如何获取邮箱的授权码？
                        </legend>
                        <div class="layui-field-box">
                            <ul class="layui-timeline">
                                <li class="layui-timeline-item">
                                    <i class="layui-icon layui-timeline-axis">&#xe643;</i>
                                    <div class="layui-timeline-content layui-text">
                                        <div class="layui-timeline-title">
                                            第1步：登录QQ邮箱
                                            <i class="layui-icon" style="color: #5FB878;font-size: 14px;">&#xe65b;</i>
                                            进入邮箱设置
                                            <i class="layui-icon" style="color: #5FB878;font-size: 14px;">&#xe65b;</i>
                                            选择账户
                                        </div>
                                    </div>
                                </li>
                                <li class="layui-timeline-item">
                                    <i class="layui-icon layui-timeline-axis">&#xe625;</i>
                                    <div class="layui-timeline-content layui-text">
                                        <div class="layui-timeline-title">
                                            第2步：找到 POP3/IMAP/SMTP/Exchange/CardDAV/CalDAV服务 项设置
                                            <i class="layui-icon" style="color: #5FB878;font-size: 14px;">&#xe65b;</i>
                                            选择开启POP3/SMTP服务
                                        </div>
                                    </div>
                                </li>
                                <li class="layui-timeline-item">
                                    <i class="layui-icon layui-timeline-axis">&#xe625;</i>
                                    <div class="layui-timeline-content layui-text">
                                        <div class="layui-timeline-title">
                                            第3步：根据提示操作获取到16位授权码,
                                            <span style="color: red;">切勿将授权码泄露给他人</span>
                                        </div>
                                    </div>
                                </li>
                                <li class="layui-timeline-item">
                                    <i class="layui-icon layui-timeline-axis">&#xe625;</i>
                                    <div class="layui-timeline-content layui-text">
                                        <div class="layui-timeline-title">
                                            第4步：将获取的16位授权码填入上方输入框提交（每个账户只需提交一次授权码）
                                        </div>
                                    </div>
                                </li>
                                <li class="layui-timeline-item">
                                    <i class="layui-icon layui-timeline-axis">&#x1005;</i>
                                    <div class="layui-timeline-content layui-text">
                                        <div class="layui-timeline-title">
                                            完成上述操作你就可以通过本系统快捷的给站内用户发送电子邮件
                                        </div>
                                    </div>
                                </li>
                            </ul>
                            <img src="img/emailTips.png" alt=""/>
                        </div>
                    </fieldset>
                </div>
            </div>
        </div>
    </div>
</div>


<script>
    let USERNAME;
    let ROLE = '${param.role}';
    $(function () {
        USERNAME = '${sessionScope.userName}';
    });
</script>
<script src="js/personage.js"></script>

</html>
